<template>
  <a-dropdown trigger="contextMenu" :popup-max-height="false" @select="actionSelect">
    <span
      class="arco-tag arco-tag-size-medium arco-tag-checked"
      :class="{ 'link-activated': itemData.fullPath === $route.fullPath }"
      @click="goto(itemData)"
    >
      <span class="tag-link">
        {{ itemData.title }}
      </span>
      <span
        class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
        @click.stop="tagClose(itemData, index)"
      >
        <icon-close />
      </span>
    </span>
    <template #content>
      <a-doption :disabled="disabledReload" :value="Eaction.reload">
        <icon-refresh />
        <span>重新加载</span>
      </a-doption>
      <a-doption class="sperate-line" :disabled="disabledCurrent" :value="Eaction.current">
        <icon-close />
        <span>关闭当前标签页</span>
      </a-doption>
      <a-doption :disabled="disabledLeft" :value="Eaction.left">
        <icon-to-left />
        <span>关闭左侧标签页</span>
      </a-doption>
      <a-doption class="sperate-line" :disabled="disabledRight" :value="Eaction.right">
        <icon-to-right />
        <span>关闭右侧标签页</span>
      </a-doption>
      <a-doption :value="Eaction.others">
        <icon-swap />
        <span>关闭其它标签页</span>
      </a-doption>
      <a-doption :value="Eaction.all">
        <icon-folder-delete />
        <span>关闭全部标签页</span>
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
  import { PropType, computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useTabBarStore } from '@/store';
  import type { TagProps } from '@/store/modules/tab-bar/types';
  import { DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';

  enum Eaction {
    reload = 'reload',
    current = 'current',
    left = 'left',
    right = 'right',
    others = 'others',
    all = 'all'
  }

  const props = defineProps({
    itemData: {
      type: Object as PropType<TagProps>,
      default() {
        return {};
      }
    },
    index: {
      type: Number,
      default: 0
    }
  });

  const router = useRouter();
  const route = useRoute();
  const tabBarStore = useTabBarStore();

  const goto = async (tag: TagProps) => {
    try {
      await router.push({ ...tag });
    } catch (error) {
      // 如果导航失败，尝试使用replace
      try {
        await router.replace({ ...tag });
      } catch (replaceError) {
        console.error('Replace navigation also failed:', replaceError);
      }
    }
  };
  const tagList = computed(() => {
    return tabBarStore.getTabList;
  });

  const disabledReload = computed(() => {
    return props.itemData.fullPath !== route.fullPath;
  });

  const disabledCurrent = computed(() => {
    return props.index === 0;
  });

  const disabledLeft = computed(() => {
    return [0, 1].includes(props.index);
  });

  const disabledRight = computed(() => {
    return props.index === tagList.value.length - 1;
  });

  const tagClose = async (tag: TagProps, idx: number) => {
    tabBarStore.deleteTag(idx, tag);
    if (props.itemData.fullPath === route.fullPath) {
      const latest = tagList.value[idx - 1]; // 获取队列的前一个tab
      try {
        await router.push({ name: latest.name });
      } catch (error) {
        console.error('Navigation after tag close failed:', error);
        // 如果导航失败，尝试使用replace
        try {
          await router.replace({ name: latest.name });
        } catch (replaceError) {
          console.error('Replace navigation after tag close also failed:', replaceError);
        }
      }
    }
  };

  const findCurrentRouteIndex = () => {
    return tagList.value.findIndex(el => el.fullPath === route.fullPath);
  };
  const actionSelect = async (value: any) => {
    const { itemData, index } = props;
    const copyTagList = [...tagList.value];

    try {
      if (value === Eaction.current) {
        tagClose(itemData, index);
      } else if (value === Eaction.left) {
        const currentRouteIdx = findCurrentRouteIndex();
        copyTagList.splice(1, props.index - 1);

        tabBarStore.freshTabList(copyTagList);
        if (currentRouteIdx < index) {
          await router.push({ name: itemData.name });
        }
      } else if (value === Eaction.right) {
        const currentRouteIdx = findCurrentRouteIndex();
        copyTagList.splice(props.index + 1);

        tabBarStore.freshTabList(copyTagList);
        if (currentRouteIdx > index) {
          await router.push({ name: itemData.name });
        }
      } else if (value === Eaction.others) {
        const filterList = tagList.value.filter((_el, idx) => {
          return idx === 0 || idx === props.index;
        });
        tabBarStore.freshTabList(filterList);
        await router.push({ name: itemData.name });
      } else if (value === Eaction.reload) {
        tabBarStore.deleteCache(itemData);
        await router.push({
          name: REDIRECT_ROUTE_NAME,
          params: {
            path: route.fullPath
          }
        });
        tabBarStore.addCache(itemData.name);
      } else {
        tabBarStore.resetTabList();
        await router.push({ name: DEFAULT_ROUTE_NAME });
      }
    } catch (error) {
      // 如果导航失败，尝试使用replace
      try {
        if (value === Eaction.left && findCurrentRouteIndex() < index) {
          await router.replace({ name: itemData.name });
        } else if (value === Eaction.right && findCurrentRouteIndex() > index) {
          await router.replace({ name: itemData.name });
        } else if (value === Eaction.others) {
          await router.replace({ name: itemData.name });
        } else if (value === Eaction.all) {
          await router.replace({ name: DEFAULT_ROUTE_NAME });
        }
      } catch (replaceError) {
        console.error('Replace navigation in action select also failed:', replaceError);
      }
    }
  };
</script>

<style scoped lang="less">
  .tag-link {
    color: var(--color-text-2);
    text-decoration: none;
  }

  .link-activated {
    color: rgb(var(--link-6));

    .tag-link {
      color: rgb(var(--link-6));
    }

    & + .arco-tag-close-btn {
      color: rgb(var(--link-6));
    }
  }

  :deep(.arco-dropdown-option-content) {
    span {
      margin-left: 10px;
    }
  }

  .arco-dropdown-open {
    .tag-link {
      color: rgb(var(--danger-6));
    }

    .arco-tag-close-btn {
      color: rgb(var(--danger-6));
    }
  }

  .sperate-line {
    border-bottom: 1px solid var(--color-neutral-3);
  }
</style>
